import TinyReact from './TinyReact';

const root = document.querySelector('#root');

class Alert extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'lanpang'
    }
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps');
    console.log(nextProps);
  }

  componentWillUpdate() {
    console.log('componentWillUpdate');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  componentDidMount() {
    console.log('componentDidMount Alert');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  handleClick() {
    this.setState({
      title: 'Wang'
    });
  }

  render() {
    return <div>
      name: {this.props.name} <br />
      age: {this.props.age}
      <div>{this.state.title}</div>
      <button onClick={this.handleClick}>改变title</button>
    </div>
  }
}

const vDom = (
  <div className="container">
    <h1 className="hello">hello tiny react</h1>
    <h2 data-test="test">666</h2>
    <div>
      嵌套1
    <div>嵌套2</div>
    </div>
    <h3>observe</h3>
    { 2 === 1 && <div>如果 2 = 1 渲染当前内容</div>}
    { 2 === 2 && <div>如果 2 = 2 渲染当前内容</div>}
    <span>内容</span>
    <button onClick={() => { alert('hello') }}>点击</button>
    <h3>删除</h3>
    2,3
    <input type="text" value="13" />
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
)

const modifyDom = (
  <div className="container">
    <h1>hello tiny react</h1>
    <h2 data-test="test123">666</h2>
    <p>
      变成了P标签
    </p>
    <h5>observe</h5>
    { 2 === 1 && <div>如果 2 = 1 渲染当前内容</div>}
    { 2 === 2 && <div>如果 2 = 2 渲染当前内容</div>}
    <span>修改的内容</span>
    <button onClick={() => { alert('蓝胖') }}>点击</button>
    <h3>删除</h3>
    2,3
    <input type="text" value="13" />
    <ul>
      <li>1</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <Alert name="lanpang" age={20} />
  </div>
)

function Hearts(props) {
  return <div>
    Hearts
    <p>{props.title}</p>
    <Demo />
  </div>
}

function Demo() {
  return <h1 id="hello">Hello</h1>
}

class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      persons: [
        {
          name: 'lanpang',
          age: 18,
          id: 1
        },
        {
          name: 'wangchao',
          age: 24,
          id: 2
        },
        {
          name: 'xuming',
          age: 18,
          id: 3
        },
        {
          name: 'xiongye',
          age: 22,
          id: 4
        },
      ]
    }
  }

  componentDidMount() {
    console.log('componentDidMount DemoRef');
  }

  handleClick() {
    const persons = [...this.state.persons];
    // persons.push(persons.shift());
    persons.splice(1, 1);
    this.setState({ persons });
  }

  render() {
    return (
      <div>
        <input type="text" ref={input => this.input = input} />
        <button onClick={this.handleClick}>点击</button>

        <div>
          {
            this.state.persons.map(person => <Alert name="lanpang" age={20} ref={alert => this.alert = alert} />)
          }
        </div>
        <div>
          {
            this.state.persons.map(person => <p key={person.id}>{person.name}</p>)
          }
        </div>
      </div>
    );
  }
}

// TinyReact.render(<Alert name="lanpang" age={20} />, document.querySelector('#root'));
TinyReact.render(<DemoRef />, root);
// setTimeout(() => {
//   // TinyReact.render(modifyDom, root);
//   TinyReact.render(<Alert name="wang" age={18} />, document.querySelector('#root'));
//   // TinyReact.render(<Hearts title="lanpang" />, document.querySelector('#root'));
// }, 2000);
